<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <title>选课列表</title>
    <!-- jquery -->
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script type="text/javascript" th:src="@{/js/common.js}"></script>

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <!--    md5加密-->
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">

    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <style>
        .row {
            margin-top: -25px
        }

        .container-fluid {
            padding-top: 36px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 10px;
            background-color: white;
            margin-bottom: -37px;
            margin-top: -7px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>
</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!-- 左边----课程列表 -->
        <div class="col-xs-12 col-lg-9 col-md-12" style="height: 551px;">
            <h3>
                <span class="glyphicon glyphicon-list" aria-hidden="true" style="margin-right: 8px;"></span>
                <span>课程列表</span>
            </h3>
            <!--            <hr>-->
            <ul class="nav nav-tabs" style="font-size: 18px;margin-top: 15px;margin-left: -16px;margin-bottom: 12px;">
                <li role="presentation" th:class="|${flag == 1 ? 'active' : ''}|">
                    <a th:href="@{/listAll}"><h5>全部</h5></a>
                </li>
                <li role="presentation" th:class="|${flag == 0 ? 'active' : ''}|">
                    <a th:href="@{/listAble}"><h5>可选</h5></a>
                </li>
            </ul>
            <!--            课程-->
            <ul class="media-list">
                <li class="media" th:each="course:${courses}">
                    <div class="media-body" style="font-size: 16px;">
                        <h4 style="white-space:nowrap; display : inline" class="media-heading" th:text="${course.name}">
                            课程名称</h4>
                        <div style="float: right">
                            <a href='javascript:void(0);' th:onclick="|selectCourse(${course.id})|">
                                <span class="label label-success">选课</span>
                            </a>
                        </div>
                        <br>

                        <div style="margin-top: 7px;">
                            <div style="float: left; color: #999" th:text="${course.teacher}">
                                教师名称
                            </div>
                            <div style="float: right; color: #999">
                                剩余名额:&nbsp;<span th:text="${course.amount}">54</span>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <!--已选课程-->
        <div class="col-xs-12 col-lg-3 col-md-12" th:fragment="selectedCourse">
            <h3>已选课程</h3>
            <hr>
            <h4><a th:href="@{/selectedCourse}" style="color:#00a0e9; font-weight:bold;">查看已选课程</a></h4>
        </div>


        <!--            分页-->
        <div style="text-align: right;">
            <div class="col-xs-12 col-lg-9 col-md-12">
                <div th:replace="common/common::pagination"></div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    function selectCourse(courseId) {
        fn(function () {
            var loading = layer.load(0, {
                shade: false,
                time: 2 * 1000
            });

            $.post(
                CONTEXT_PATH_DEV + "/doSelect",
                {
                    courseId: courseId
                },
                function (data) {
                    layer.close(loading)
                    layer.msg(data.msg);

                    if (data.code === 2) {
                        getResult(courseId)
                    }
                }
            )

        })
    }

    function getResult(courseId) {
        $.get(
            CONTEXT_PATH_DEV + "/getSelectResult",
            {
                courseId: courseId
            },
            function (data) {
                layer.msg(data.msg)
                if (data.code === 2) {
                    getResult(courseId)
                }
            }
        )
    }


    function dropCourse() {
        var loading = layer.load(0, {
            shade: false,
            time: 2 * 1000
        });
        $.post(
            CONTEXT_PATH_DEV + "/dropCourse",
            function (data) {
                layer.close(loading)

                layer.msg(data.msg)
                setTimeout(function () {
                    location.reload()
                }, 800)
            }
        )
    }

    //防止重复点击
    function fn(callback) {
        fn.prototype.init(callback)
    }

    fn.prototype = {
        canclick: true,
        init: function (callback) {
            if (this.canclick) {
                this.canclick = false
                callback()
                setTimeout(function () {
                    this.canclick = true

                }.bind(this), 2000)
            } else {
                layer.closeAll()
                layer.msg("点击太频繁，请稍后再试！");
            }
        }
    }


</script>
</html>